<template>
  <div class="app-container">
    <!-- 主界面区域 -->
    <div class="class-info">
      <el-card class="box-card">
        <el-form :model="form.onlineClass" label-width="80px" ref="form.onlineClass">
          <!-- 标题+审核状态 -->
          <el-row :gutter="0">
            <el-col :span="10">
              <el-form-item prop="onlineClassName" label="课程名称">
                <el-input placeholder="请输入课程名称" v-model="form.onlineClass.onlineClassName" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item prop="onlineClassStatus" label="弹出方式">
                <el-radio v-model="form.onlineClass.dataAnchorPopupType" :label="0">以视频随堂小考设置为准</el-radio>
                <el-radio v-model="form.onlineClass.dataAnchorPopupType" :label="1">弹出一次</el-radio>
                <el-radio v-model="form.onlineClass.dataAnchorPopupType" :label="2">一直弹出</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="onlineClassStatus" label="审核状态">
                <el-radio v-model="form.onlineClass.onlineClassStatus" :label="0">未审核</el-radio>
                <el-radio v-model="form.onlineClass.onlineClassStatus" :label="1">已发布</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 分享标题+H5网址+展示顺序 -->
          <el-row :gutter="0">
            <el-col :span="6">
              <el-form-item prop="onlineClassShareTitle" label="分享标题">
                <el-input placeholder="请输入内容分享标题" v-model="form.onlineClass.onlineClassShareTitle" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="onlineClassHtml" label="H5网址">
                <el-input placeholder="请输入H5介绍网址" v-model="form.onlineClass.onlineClassHtml" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="onlineClassShowIndex" label="展示顺序">
                <el-input-number v-model="form.onlineClass.onlineClassShowIndex" :min="0" :max="9999999999"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 展示图+分享图+首页图 -->
          <el-row :gutter="0">
            <el-col :span="6">
              <el-form-item prop="onlineClassImage" label="展示图">
                <el-upload
                  class="avatar-uploader"
                  action="/api/cms/common/uploadFile"
                  :show-file-list="false"
                  :on-success="handleClassImageUploadSuccess">
                  <img v-if="form.onlineClass.onlineClassImage" :src="form.onlineClass.onlineClassImage" alt="" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="onlineClassShareImage" label="分享图">
                <el-upload
                  class="avatar-uploader"
                  action="/api/cms/common/uploadFile"
                  :show-file-list="false"
                  :on-success="handleShareImageUploadSuccess">
                  <img v-if="form.onlineClass.onlineClassShareImage" :src="form.onlineClass.onlineClassShareImage" alt="" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="onlineClassHomeImage" label="首页图">
                <el-upload
                  class="avatar-uploader"
                  action="/api/cms/common/uploadFile"
                  :show-file-list="false"
                  :on-success="handleHomeImageUploadSuccess">
                  <img v-if="form.onlineClass.onlineClassHomeImage" :src="form.onlineClass.onlineClassHomeImage" alt="" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 简介+更新按钮 -->
          <el-row :gutter="0">
            <el-col :span="18">
              <el-form-item prop="onlineClassIntro" label="研修简介">
                <el-input placeholder="请输入在线研修简介信息" v-model="form.onlineClass.onlineClassIntro" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button size="medium" type="primary" @click="handleUpdateOnlineClass">更新数据</el-button>
              <el-button size="medium" type="primary" @click="handleOpenColumnPanel">新增栏目</el-button>
            </el-col>
          </el-row>
          <!-- 内容预览区域 -->
          <el-tabs type="border-card">
            <!-- 遍历课程下的栏目列表 -->
            <div v-for="column in form.onlineClass.onlineColumnList">
              <!-- 栏目名称+审核状态+展示顺序+更新按钮 -->
              <el-card class="box-card">
                <el-row :gutter="0">
                  <el-col :span="10">
                    <el-form-item prop="onlineColumnName" label="栏目名称">
                      <el-input placeholder="请输入栏目名称" v-model="column.onlineColumnName" class="filter-item" auto-complete="off"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item prop="onlineColumnStatus" label="审核状态">
                      <el-radio-group v-model="column.onlineColumnStatus">
                        <el-radio :label="0">未发布</el-radio>
                        <el-radio :label="1">已发布</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item prop="onlineColumnShowIndex" label="展示顺序">
                      <el-input placeholder="请输入展示顺序" v-model="column.onlineColumnShowIndex" class="filter-item" auto-complete="off"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="handleOpenDataPanel(column)">新增内容</el-button>
                    <el-button type="danger" @click="handleDeleteColumn(column.onlineClassId,column.onlineColumnId)">删除栏目</el-button>
                  </el-col>
                </el-row>
              </el-card>
              <!-- 内容列表 -->
              <el-card class="box-card" v-if="column.onlineDataList.length > 0">
                <el-collapse v-model="responseData.activeNames">
                  <el-collapse-item :title="data.onlineDataTitle" :name="data.onlineDataId" v-for="data in column.onlineDataList" :key="data.onlineDataId">
                    <!-- 内容名称+关联讲师+可用状态+展示顺序+更新按钮 -->
                    <el-row :gutter="0">
                      <el-col :span="6">
                        <el-form-item prop="onlineDataTitle" label="内容名称">
                          <el-input v-model="data.onlineDataTitle" :disabled="true"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="onlineDataLecturerTitle" label="讲师名称">
                          <el-input v-model="data.onlineDataLecturerTitle" :disabled="true"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="5">
                        <el-form-item prop="onlineDataStatus" label="审核状态">
                          <el-radio v-model="data.onlineDataStatus" :label="0">禁用</el-radio>
                          <el-radio v-model="data.onlineDataStatus" :label="1">启用</el-radio>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="onlineDataShowIndex" label="展示顺序">
                          <el-input v-model="data.onlineDataShowIndex"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="5">
                        <el-button type="primary" v-if="form.onlineClass.dataAnchorType == 1" @click="handleOpenAnchorPanel(form.onlineClass.onlineClassId,column.onlineColumnId,data.onlineDataId,data.onlineDataAnchorList)">增加锚点</el-button>
                        <el-button type="danger" @click="handleDeleteData(form.onlineClass.onlineClassId,column.onlineColumnId,data.onlineDataId)">删除内容</el-button>
                      </el-col>
                    </el-row>
                  </el-collapse-item>
                </el-collapse>
              </el-card>
            </div>
          </el-tabs>
        </el-form>
      </el-card>
    </div>
    <!-- 新增栏目 -->
    <el-dialog title="栏目新增" :visible.sync="pageData.saveColumnPanelStatus"  width="80%" style="min-width: 1366px"
               :before-close="handleCloseColumnPanel">
      <el-form :model="form.column" label-width="40px" ref="form.column">
        <!-- 栏目名称 -->
        <el-row :gutter="0">
          <el-col :span="24">
            <el-form-item label="名称">
              <el-input v-model="form.column.columnName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 审核状态+展示顺序 -->
        <el-row :gutter="0">
          <el-col :span="8">
            <el-form-item label="状态">
              <el-radio-group v-model="form.column.columnStatus">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="0">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="顺序">
              <el-input type="number" v-model="form.column.columnShowIndex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="success" style="float: left" @click="handleAddDataButtonClick">增加课程</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 内容列表 -->
        <div v-for="(item,index) in form.column.columnData">
          <!-- 内容类型+审核状态+展示顺序+关联讲师+删除按钮 -->
          <el-row :gutter="0">
            <el-col :span="2">
              <el-form-item prop="onlineDateType" label="类型">
                <el-tag v-if="item.onlineDateType === -1" type="danger">暂无</el-tag>
                <el-tag v-if="item.onlineDateType === 1" type="success">视频</el-tag>
                <el-tag v-if="item.onlineDateType === 2" type="info">文章</el-tag>
                <el-tag v-if="item.onlineDateType === 3" type="warning">音频</el-tag>
                <el-tag v-if="item.onlineDateType === 4" type="danger">图集</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="onlineDataId" label="内容">
                <el-select v-model="item.onlineDataId" filterable remote reserve-keyword placeholder="请输入关键字" :remote-method="handleRemoteData" @change="handleSelectData(index)">
                  <el-option
                    v-for="data in responseData.remoteSearchList"
                    :key="data.value"
                    :label="data.label"
                    :value="data.value">
                    <span style="float: left">{{ data.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ data.typeLabel }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="onlineDataStatus" label="状态">
                <el-radio-group v-model="item.onlineDataStatus">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="0">不通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="onlineDataShowIndex" label="顺序">
                <el-input v-model="item.onlineDataShowIndex" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="onlineDataLecturerId" label="讲师">
                <el-select v-model="item.onlineDataLecturerId" filterable remote reserve-keyword placeholder="请选择讲师" :remote-method="handleRemoteLecturerData">
                  <el-option
                    v-for="item in responseData.remoteSearchLecturerList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <el-button type="danger" style="float: left" @click="handleDeleteColumnData(index)">删除课程</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="handleSaveColumnData">保存栏目</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 内容新增 -->
    <el-dialog title="内容新增" :visible.sync="pageData.saveDataPanelStatus"  width="80%" style="min-width: 1366px"
               :before-close="handleCloseDataPanel">
      <el-form :model="form.data" label-width="40px" ref="form.data">
        <!-- 栏目名称 -->
        <el-row :gutter="0">
          <el-col :span="24">
            <el-form-item label="名称">
              <el-input v-model="form.data.columnName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 审核状态+展示顺序 -->
        <el-row :gutter="0">
          <el-col :span="8">
            <el-form-item label="状态">
              <el-radio-group v-model="form.data.columnStatus">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="0">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="顺序">
              <el-input type="number" v-model="form.data.columnShowIndex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="success" style="float: left" @click="handleAddDataButtonClick2">增加课程</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 内容列表 -->
        <div v-for="(item,index) in form.data.columnData">
          <!-- 内容类型+审核状态+展示顺序+关联讲师+删除按钮 -->
          <el-row :gutter="0">
            <el-col :span="2">
              <el-form-item prop="onlineDateType" label="类型">
                <el-tag v-if="item.onlineDateType === -1" type="danger">暂无</el-tag>
                <el-tag v-if="item.onlineDateType === 1" type="success">视频</el-tag>
                <el-tag v-if="item.onlineDateType === 2" type="info">文章</el-tag>
                <el-tag v-if="item.onlineDateType === 3" type="warning">音频</el-tag>
                <el-tag v-if="item.onlineDateType === 4" type="danger">图集</el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="onlineDataId" label="内容">
                <el-select v-model="item.onlineDataId" filterable remote reserve-keyword placeholder="请输入关键字" :remote-method="handleRemoteData" @change="handleSelectData(index)">
                  <el-option
                    v-for="data in responseData.remoteSearchList"
                    :key="data.value"
                    :label="data.label"
                    :value="data.value">
                    <span style="float: left">{{ data.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ data.typeLabel }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="onlineDataStatus" label="状态">
                <el-radio-group v-model="item.onlineDataStatus">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="0">不通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="onlineDataShowIndex" label="顺序">
                <el-input v-model="item.onlineDataShowIndex" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="onlineDataLecturerId" label="讲师">
                <el-select v-model="item.onlineDataLecturerId" filterable remote reserve-keyword placeholder="请选择讲师" :remote-method="handleRemoteLecturerData">
                  <el-option
                    v-for="item in responseData.remoteSearchLecturerList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <el-button type="danger" style="float: left" @click="handleDeleteColumnData2(index)">删除课程</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="handleSaveData">保存内容</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 锚点新增 -->
    <el-dialog title="锚点管理" :visible.sync="pageData.saveAnchorPanelStatus" width="80%" style="min-width: 1366px"
               :before-close="handleCloseAnchorPanel">
      <el-card class="box-card">
        <div class="text item">
          <el-table :data="form.anchor"
                    border style="width: 100%;"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :header-cell-style="{ background: '#545C64', color: '#ffffff' }">
            <el-table-column prop="anchorName" label="数据名称" width="240" align="center">
              <template slot-scope="scope">
                <span class="link-type">{{ scope.row.anchorName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="anchorPopupTime" label="弹出时间" width="80" align="center">
              <template slot-scope="scope">
                <span class="link-type">{{ scope.row.anchorPopupTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="anchorStatus" label="弹出类型" width="120" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.anchorStatus === 1"><el-tag type="warning">弹出一次</el-tag></span>
                <span v-if="scope.row.anchorStatus === 2"><el-tag type="success">一直弹出</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="onlineClassId" label="课程ID" width="320" align="center"/>
            <el-table-column prop="onlineColumnId" label="栏目ID" width="320" align="center"/>
            <el-table-column prop="onlineDataId" label="内容ID" width="320" align="center"/>
            <el-table-column prop="anchorId" label="锚点ID" width="320" align="center"/>
            <el-table-column prop="anchorTargetId" label="问题ID" width="320" align="center"/>
            <el-table-column fixed="right" label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="handleDeleteDataAnchor(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card class="box-card">
        <el-form :model="form.anchorData" label-width="100px" ref="form.anchorData">
          <div class="text item">
            <el-form-item prop="onlineClassId" label="研修ID">
              <el-input v-model="form.anchorData.onlineClassId" class="filter-item" auto-complete="off" :disabled="true"/>
            </el-form-item>
            <el-form-item prop="onlineColumnId" label="栏目ID">
              <el-input v-model="form.anchorData.onlineColumnId" class="filter-item" auto-complete="off" :disabled="true"/>
            </el-form-item>
            <el-form-item prop="onlineDataId" label="内容ID">
              <el-input v-model="form.anchorData.onlineDataId" class="filter-item" auto-complete="off" :disabled="true"/>
            </el-form-item>
            <el-form-item prop="onlineAnchorStatus" label="弹出类型">
              <el-radio v-model="form.anchorData.anchorStatus" :label="1">仅一次</el-radio>
              <el-radio v-model="form.anchorData.anchorStatus" :label="2">一直弹出</el-radio>
            </el-form-item>
            <el-form-item prop="onlinePopupTime" label="弹出时间">
              <el-input v-model="form.anchorData.anchorPopupTime" class="filter-item" auto-complete="off"/>
            </el-form-item>
            <el-form-item prop="onlineAnchorId" label="锚点">
              <el-select v-model="form.anchorData.anchorTargetId" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="handleRemoteQuestionData">
                <el-option
                  v-for="data in responseData.remoteSearchQuestionList"
                  :key="data.value"
                  :label="data.label"
                  :value="data.value">
                  <span style="float: left">{{ data.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ data.typeLabel }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <div style="margin-top: 20px">
              <el-button type="primary" @click.native.prevent="handleSaveAnchorData">保存锚点</el-button>
            </div>
          </div>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission } from '@/utils/UserCookies';
  // 接口引入
  import { loadCmsOnlineClassData,loadCmsOnlineClassDataList,loadCmsLecturerDataList,saveCmsOnlineColumnData,saveCmsOnlineData,
    deleteCmsOnlineColumnData,deleteCmsOnlineData,deleteCmsAnchorData,loadCmsQuestionDataList,saveCmsOnlineAnchorData,updateCmsOnlineClassData } from "@/api/study";
  export default {
    name: "edit",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{
          activeNames: "",
          saveColumnPanelStatus: false,
          saveDataPanelStatus: false,
          saveAnchorPanelStatus: false,
        },// 页面配置数据
        form:{
          onlineClassId: "",
          onlineClass: {},
          column: {
            onlineClassId: "",
            columnName: "",
            columnStatus: 0,
            columnShowIndex: 0,
            columnData: [{
              onlineDataId: "",
              onlineDateType: -1,
              onlineDataStatus: 0,
              onlineDataShowIndex: 0,
              onlineDataLecturerId: "",
            }]
          },// 栏目新增
          data: {
            onlineClassId: "",
            onlineColumnId: "",
            columnName: "",
            columnStatus: 0,
            columnShowIndex: 0,
            columnData: [{
              onlineDataId: "",
              onlineDateType: -1,
              onlineDataStatus: 1,
              onlineDataShowIndex: 0,
              dataLecturer: "",
            }]
          },// 内容新增
          anchor: [{
            anchorName: "",
            anchorPopupTime: "",
            anchorStatus: "",
            onlineClassId: "",
            onlineColumnId: "",
            onlineDataId: "",
            anchorId: "",
            anchorTargetId: ""
          }],// 锚点新增
          anchorData: {
            onlineClassId: "",
            onlineColumnId: "",
            onlineDataId: "",
            anchorTargetId: "",
            anchorStatus: 1,
            anchorPopupTime: "0",
          }
        },// 页面表单
        formRules: {},// 表单验证
        responseData: {
          remoteSearchList: [],
          remoteSearchLecturerList: [],
          remoteSearchQuestionList: [],
        },// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 事件函数
      handlePageInit(){
        // 封装访问参数
        let param = {onlineClassId: this.form.onlineClassId};
        // 请求数据接口
        this.loadCmsOnlineClassData(param);
      },// 页面初始化事件
      handleClassImageUploadSuccess(response){
        this.form.onlineClass.onlineClassImage = response.data;
      },// 展示图上传成功
      handleShareImageUploadSuccess(response){
        this.form.onlineClass.onlineClassShareImage = response.data;
      },// 分享图上传成功
      handleHomeImageUploadSuccess(response){
        this.form.onlineClass.onlineClassHomeImage = response.data;
      },// 首页图上传成功
      handleOpenColumnPanel(){
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          // 初始化表单数据
          this.form.column.onlineClassId = this.form.onlineClassId;
          // 打开面板
          this.pageData.saveColumnPanelStatus = true;
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 打开栏目新增面板
      handleCloseColumnPanel(){
        this.$confirm("确认关闭？").then(response => {
          // 初始化表单数据
          this.form.column = {
            onlineClassId: "",
            columnName: "",
            columnStatus: 0,
            columnShowIndex: 0,
            columnData: [{
              onlineDataId: "",
              onlineDateType: -1,
              onlineDataStatus: 0,
              onlineDataShowIndex: 0,
              onlineDataLecturerId: "",
            }]
          };
          // 打开面板
          this.pageData.saveColumnPanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭栏目新增面板
      handleAddDataButtonClick(){
        // 初始化数据
        let data = {
          onlineDataId: "",
          onlineDateType: -1,
          onlineDataStatus: this.form.column.columnStatus,
          onlineDataShowIndex: 0,
          onlineDataLecturerId: ""
        };
        // 填充表单数据
        this.form.column.columnData.push(data);
      },// 栏目新增面板，增加内容行数
      handleRemoteData(query){
        if (query !== "") {
          let param = {
            searchTitle: query,
          };
          this.loadCmsOnlineClassDataList(param);
        } else {
          this.responseData.remoteSearchList = [];
        }
      },// 搜索可用内容列表
      handleSelectData(index){
        for (let i=0; i<this.responseData.remoteSearchList.length; i++){
          if (this.responseData.remoteSearchList[i].value === this.form.column.columnData[index].onlineDataId){
            this.form.column.columnData[index].onlineDataId = this.responseData.remoteSearchList[i].value;
            this.form.column.columnData[index].onlineDateType = this.responseData.remoteSearchList[i].type;
          }
        }
      },// 内容列表选择事件
      handleRemoteLecturerData(query){
        if (query !== ''){
          let param = {searchTitle: query};
          this.loadCmsLecturerDataList(param);
        } else {
          this.responseData.remoteSearchLecturerList = [];
        }
      },// 远程搜索可用讲师列表
      handleDeleteColumnData(index){
        this.form.column.columnData.splice(index,1);
      },// 栏目新增面板，删除内容行数
      handleSaveColumnData(){
        // 判断是否选择了讲师
        for (let i=0; i<this.form.column.columnData.length; i++){
          if (this.form.column.columnData[i].onlineDataLecturerId === "" || this.form.column.columnData[i].onlineDataLecturerId === undefined){
            this.$message.warning("尚有未关联讲师的课程，无法进行保存，请确认后继续");
            return;
          }
        }
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          this.$confirm("是否保存当前所填写栏目数据?", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.saveCmsOnlineColumnData();
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 新增栏目面板保存数据
      handleOpenDataPanel(column){
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          // 初始化数据
          this.form.data = {
            onlineClassId: column.onlineClassId,
            onlineColumnId: column.onlineColumnId,
            columnName: column.onlineColumnName,
            columnStatus: column.onlineColumnStatus,
            columnShowIndex: column.onlineColumnShowIndex,
            columnData: [{
              onlineDataId: "",
              onlineDateType: -1,
              onlineDataStatus: 1,
              onlineDataShowIndex: 0,
              dataLecturer: "",
            }]
          };
          // 打开面板
          this.pageData.saveDataPanelStatus = true;
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 打开内容新增面板
      handleCloseDataPanel(){
        this.$confirm("确认关闭？").then(response => {
          // 初始化数据
          this.form.data = {
            onlineClassId: "",
            onlineColumnId: "",
            columnName: "",
            columnStatus: 0,
            columnShowIndex: 0,
            columnData: [{
              onlineDataId: "",
              onlineDateType: -1,
              onlineDataStatus: 1,
              onlineDataShowIndex: 0,
              dataLecturer: "",
            }]
          };
          // 打开面板
          this.pageData.saveDataPanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭内容新增面板
      handleAddDataButtonClick2(){
        // 初始化数据
        let data = {
          onlineDataId: "",
          onlineDateType: -1,
          onlineDataStatus: this.form.data.columnStatus,
          onlineDataShowIndex: 0,
          onlineDataLecturerId: ""
        };
        // 填充表单数据
        this.form.data.columnData.push(data);
      },// 内容新增面板，增加内容行数
      handleDeleteColumnData2(index){
        this.form.data.columnData.splice(index,1);
      },// 内容新增面板，删除内容行数
      handleSaveData(){
        // 判断是否选择了讲师
        for (let i=0; i<this.form.data.columnData.length; i++){
          if (this.form.data.columnData[i].onlineDataLecturerId === "" || this.form.data.columnData[i].onlineDataLecturerId === undefined){
            this.$message.warning("尚有未关联讲师的课程，无法进行保存，请确认后继续");
            return;
          }
        }
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          this.$confirm("是否保存当前所填写内容数据?", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.saveCmsOnlineData();
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 保存内容按钮点击事件
      handleDeleteColumn(classId, columnId){
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          this.$confirm("是否删除当前栏目及其内容数据?", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = {
              onlineClassId: classId,
              onlineColumnId:  columnId
            };
            this.deleteCmsOnlineColumnData(param);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 删除栏目按钮点击事件
      handleDeleteData(classId, columnId, dataId){
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          this.$confirm("是否删除内容数据?", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = {
              onlineClassId: classId,
              onlineColumnId: columnId,
              onlineDataId:  dataId
            };
            this.deleteCmsOnlineData(param);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 删除内容
      handleOpenAnchorPanel(classId,columnId,dataId,anchor){
        // 初始化表单
        this.form.anchor = anchor;
        this.form.anchorData.onlineClassId = classId;
        this.form.anchorData.onlineColumnId = columnId;
        this.form.anchorData.onlineDataId = dataId;
        // 打开面板
        this.pageData.saveAnchorPanelStatus = true;
      },// 打开锚点管理面板
      handleCloseAnchorPanel(){
        this.$confirm("确认关闭？").then(response => {
          // 初始化表单
          this.form.anchor = [{
            anchorName: '',
            anchorPopupTime: '',
            anchorStatus: '',
            onlineClassId: '',
            onlineColumnId: '',
            onlineDataId: '',
            anchorId: '',
            anchorTargetId: ''
          }];
          this.form.anchorData.onlineClassId = "";
          this.form.anchorData.onlineColumnId = "";
          this.form.anchorData.onlineDataId = "";
          this.form.anchorData.anchorTargetId = "";
          this.form.anchorData.anchorStatus = 1;
          this.form.anchorData.anchorPopupTime = "";
          // 打开面板
          this.pageData.saveAnchorPanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭锚点管理面板
      handleDeleteDataAnchor(scope){
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          this.$confirm('是否删除该锚点数据, 请核对后继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let prams = {
              onlineClassId: scope.row.onlineClassId,
              onlineColumnId: scope.row.onlineColumnId,
              onlineDataId: scope.row.onlineDataId,
              anchorId: scope.row.anchorId,
              anchorTargetId: scope.row.anchorTargetId
            };
            this.deleteCmsAnchorData(prams);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 删除锚点数据
      handleRemoteQuestionData(query){
        if (query !== ''){
          let param = {searchTitle: query};
          this.loadCmsQuestionDataList(param);
        } else {
          this.responseData.remoteSearchQuestionList = [];
        }
      },// 搜索锚点题目数据
      handleSaveAnchorData(){
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          if (this.form.anchorData.anchorTargetId == ""){// 未选择锚点则不保存数据
            // 初始化表单
            this.form.anchor = [{
              anchorName: '',
              anchorPopupTime: '',
              anchorStatus: '',
              onlineClassId: '',
              onlineColumnId: '',
              onlineDataId: '',
              anchorId: '',
              anchorTargetId: ''
            }];
            this.form.anchorData.onlineClassId = "";
            this.form.anchorData.onlineColumnId = "";
            this.form.anchorData.onlineDataId = "";
            this.form.anchorData.anchorTargetId = "";
            this.form.anchorData.anchorStatus = 1;
            this.form.anchorData.anchorPopupTime = "0";
            // 打开面板
            this.pageData.saveAnchorPanelStatus = false;
            this.handlePageInit();
          } else {
            this.saveCmsOnlineAnchorData();
          }
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 保存锚点数据
      handleUpdateOnlineClass(){
        console.log(this.form.onlineClass);
        if (PermissionsToDetectFormUser(getPermission(), "600003")){
          this.$confirm('当前操作会影响该课程的数据, 请核对后继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.updateCmsOnlineClassData();
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 大表单更新按钮点击事件
      // 接口
      loadCmsOnlineClassData(param){
        loadCmsOnlineClassData(param).then(response => {
          if (response.code === "200"){
            this.form.onlineClass = response.data;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        });
      },// 获取课程修改页数据
      loadCmsOnlineClassDataList(param){
        loadCmsOnlineClassDataList(param).then(response => {
          if (response.code === "200"){
            this.responseData.remoteSearchList = response.data
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 获取可用内容列表
      loadCmsLecturerDataList(param){
        loadCmsLecturerDataList(param).then(response => {
          if (response.code === "200"){
            this.responseData.remoteSearchLecturerList = response.data
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 获取可用内容列表
      saveCmsOnlineColumnData(){
        saveCmsOnlineColumnData(this.form.column).then(response => {
          if (response.code === "200"){
            this.$message.success('栏目信息保存成功');
            // 初始化表单数据
            this.form.column = {
              onlineClassId: "",
              columnName: "",
              columnStatus: 0,
              columnShowIndex: 0,
              columnData: [{
                onlineDataId: "",
                onlineDateType: -1,
                onlineDataStatus: 0,
                onlineDataShowIndex: 0,
                onlineDataLecturerId: "",
              }]
            };
            // 打开面板
            this.pageData.saveColumnPanelStatus = false;
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 保存栏目数据
      saveCmsOnlineData(){
        saveCmsOnlineData(this.form.data).then(response => {
          if (response.code === "200"){
            this.$message.success('内容保存成功');
            // 初始化表单数据
            this.form.data = {
              onlineClassId: "",
              onlineColumnId: "",
              columnName: "",
              columnStatus: 0,
              columnShowIndex: 0,
              columnData: [{
                onlineDataId: "",
                onlineDateType: -1,
                onlineDataStatus: 1,
                onlineDataShowIndex: 0,
                dataLecturer: "",
              }]
            };
            // 打开面板
            this.pageData.saveDataPanelStatus = false;
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 保存内容数据
      deleteCmsOnlineColumnData(param){
        deleteCmsOnlineColumnData(param).then(response => {
          if (response.code === "200"){
            this.$message.success('栏目删除成功');
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 删除栏目数据
      deleteCmsOnlineData(param){
        deleteCmsOnlineData(param).then(response => {
          if (response.code === "200"){
            this.$message.success('内容删除成功');
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 删除栏目数据
      deleteCmsAnchorData(param){
        deleteCmsAnchorData(param).then(response => {
          if (response.code === "200"){
            this.$message.success('数据删除成功');
            this.pageData.saveAnchorPanelStatus = false;
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 删除锚点数据
      loadCmsQuestionDataList(param){
        loadCmsQuestionDataList(param).then(response => {
          if (response.code === "200"){
            this.responseData.remoteSearchQuestionList = response.data;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 获取锚点列表
      saveCmsOnlineAnchorData(){
        saveCmsOnlineAnchorData(this.form.anchorData).then(response => {
          if (response.code === "200"){
            this.$message.success('锚点保存成功');
            // 初始化表单
            this.form.anchor = [{
              anchorName: '',
              anchorPopupTime: '',
              anchorStatus: '',
              onlineClassId: '',
              onlineColumnId: '',
              onlineDataId: '',
              anchorId: '',
              anchorTargetId: ''
            }];
            this.form.anchorData.onlineClassId = "";
            this.form.anchorData.onlineColumnId = "";
            this.form.anchorData.onlineDataId = "";
            this.form.anchorData.anchorTargetId = "";
            this.form.anchorData.anchorStatus = 1;
            this.form.anchorData.anchorPopupTime = "0";
            // 打开面板
            this.pageData.saveAnchorPanelStatus = false;
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 保存锚点数据
      updateCmsOnlineClassData(){
        let param = {onlineClass: this.form.onlineClass};
        updateCmsOnlineClassData(param).then(response =>{
          if (response.code === "200"){
            this.$message.success('数据更新成功');
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 更新课程大表单
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      let _this = this;
      _this.form.onlineClassId = _this.$route.query.onlineClassId;
      // 进行初始化数据读取
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
